<template>
	<el-breadcrumb :separator-icon="ArrowRight">
		<transition-group name="breadcrumb" mode="out-in">
			<template v-if="breadcrumbList">
				<!-- 使面包屑的最前面始终保留 ‘首页’ -->
				<!-- <el-breadcrumb-item :key="HOME_URL" :to="{ path: HOME_URL }" v-if="breadcrumbList[0].meta.title !== '首页'">
					<div class="breadcrumb-item">
						<el-icon class="breadcrumb-icon" v-if="themeConfig.breadcrumbIcon">
							<HomeFilled />
						</el-icon>
						<span class="breadcrumb-title">首页</span>
					</div>
				</el-breadcrumb-item> -->
				<!-- 其他模块的面包屑 -->
				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
					<div class="breadcrumb-item el-breadcrumb__inner">
						<el-icon class="breadcrumb-icon" v-if="item.meta.icon && layoutConfig.showBreadcrumbIcon">
							<component :is="item.meta.icon"></component>
						</el-icon>
						<span class="breadcrumb-title">{{ $t(item.meta.title) }}</span>
					</div>
				</el-breadcrumb-item>
			</template>
		</transition-group>
	</el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useAppConfigUserStore,useAuthMenuAndButtonStore } from "@/stores";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { HOME_URL } from "@/config/app"
const authStore = useAuthMenuAndButtonStore()
const allBreadcrumb = authStore.breadcrumbListGet // 获取所有的面包屑
const route = useRoute();
const {layoutConfig} = storeToRefs(useAppConfigUserStore());
const breadcrumbList = computed(() => allBreadcrumb[route.matched[route.matched.length - 1].path]);

</script>

<style scoped lang="scss">

.breadcrumb-item {
	display: flex;
	align-items: center;
	.breadcrumb-icon {
		margin-right: 6px;
		font-size: 16px;
	}
}
</style>
